import React, { useState, useEffect } from 'react';
import {
  Form,
  Grid,
  Message,
  Select,
  Card,
  Space,
  Button,
  Spin,
} from '@arco-design/web-react';
import UploadImage from '@/components/UploadImage';
import { queryAd, addAd, updateAd } from '@/api/site/right';
import styles from './style/index.module.less';
import { IconRefresh, IconSave } from '@arco-design/web-react/icon';
import dayjs from 'dayjs';

const Row = Grid.Row;
const Col = Grid.Col;
const showPositions = [
  '首页',
  '文章',
  '文章详情',
  '归档',
  '分类',
  '分类详情',
  '标签',
  '标签详情',
  '关于',
];
const Tab1 = () => {
  const [form] = Form.useForm();
  const [time, setTime] = useState('');
  const [loading, setLoding] = useState(false);

  const loadData = async (isRefresh?: boolean) => {
    setLoding(true);
    const res: any = await queryAd();
    if (isRefresh) {
      Message.success('刷新成功');
    }
    const data = res.data;
    console.log(data);
    if (!data) {
      setLoding(false);
      return;
    }
    form.setFieldsValue(data);
    const updateTime = dayjs(data.updateTime).format('YYYY-MM-DD HH:mm:ss');
    setTime(updateTime);
    setLoding(false);
  };

  useEffect(() => {
    loadData();
  }, []);

  const onRefresh = () => {
    loadData(true);
  };

  const onSave = async () => {
    setLoding(true);
    await form.validate();
    const values = await form.getFields();
    console.log('values', values);

    const postData = values;
    postData.imgs = postData.imgs.map((item) => {
      return {
        imgUrl: item.imgUrl,
        link: item.link,
        // _id: item._id,
      };
    });

    console.log('postData', postData);
    const func = values._id ? updateAd : addAd;
    const res: any = await func(postData);
    if (res.data) {
      loadData();
      Message.success(res.msg);
    } else {
      Message.error('修改失败，请重试');
    }
    setLoding(false);
  };

  return (
    <>
      <Spin
        loading={loading}
        className={styles.container}
        style={{ display: 'block' }}
      >
        <Form form={form}>
          <Row>
            <Col span={12}>
              <Form.Item
                label="广告图片(1-3张)"
                field="imgs"
                rules={[{ required: true, message: '请添加广告图片' }]}
              >
                <UploadImage max={3} />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item
                label="展示位置"
                field="showPosition"
                rules={[{ required: true, message: '请选择展示位置' }]}
              >
                <Select mode="multiple" placeholder="请选择展示位置">
                  {showPositions.map((option) => (
                    <Select.Option key={option} value={option}>
                      {option}
                    </Select.Option>
                  ))}
                </Select>
              </Form.Item>
            </Col>
          </Row>
        </Form>
        <Card
          className={styles['save-card']}
          headerStyle={{ border: 'none', height: 'auto', paddingTop: '20px' }}
        >
          <Row>
            <Col span={24}>
              <Space size="large">
                <Button type="text">上次更新：{time || '0000-00-00'}</Button>
                <Button
                  type="outline"
                  onClick={onRefresh}
                  icon={<IconRefresh />}
                >
                  刷新
                </Button>
                <Button type="primary" onClick={onSave} icon={<IconSave />}>
                  保存
                </Button>
              </Space>
            </Col>
          </Row>
        </Card>
      </Spin>
    </>
  );
};

export default Tab1;
